<template>
  <div id="pay">
    <div class="pay-num"><span>￥</span>{{ payInfo.totalAmount }}</div>
    <div class="pay-type">
      <RadioGroup v-model="radio" @change="handlePay">
        <div class="pay-wx">
          <div class="pay-wx-left">
            <img src="../../assets/img/wxpay.png" width="50" />
            <p>微信支付</p>
          </div>
          <Radio name="0"></Radio>
        </div>
        <p class="pay-line"></p>
        <div class="pay-wx">
          <div class="pay-wx-left">
            <img src="../../assets/img/logo.png" width="50" />
            <p>一码通支付</p>
          </div>
          <Radio name="1"></Radio>
        </div>
      </RadioGroup>
    </div>

    <div @click="payAction" :class="btnSign ? 'pay-btn-d' : 'pay-btn'">
      <p>{{ payText }}￥{{ payInfo.totalAmount }}</p>
    </div>
  </div>
</template>

<script>
import { RadioGroup, Radio } from "vant";
import { storage } from "@/plugins/storage";
import * as types from "../../store/mutation-types";
export default {
  components: {
    RadioGroup,
    Radio
  },
  data() {
    return {
      radio: "0",
      sessionPay: {},
      payInfo: {
        totalAmount: "30.00"
      },
      payText: "微信支付 ",
      btnSign: true
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.sessionPay = storage.get(types.PAY_INFO);
      this.api.tradeState({ bizNo: this.sessionPay.bizNo }).then(res => {
        // this.payInfo = res;
      });
    },
    handlePay(e) {
      if (e === "0") {
        this.payText = "微信支付 ";
        this.btnSign = true;
      } else if (e === "1") {
        this.payText = "一码通支付 ";
        this.btnSign = false;
      }
    },
    payAction() {
      if (!this.btnSign) {
        let uri = "https://service.neuqsoft.com/ggfw/citizen/inner?back=";
        location.href = encodeURIComponent(uri) + JSON.stringify(this.sessionPay);
          // "http://10.19.92.209:8880/#/inner?back=" +
          // JSON.stringify(this.sessionPay);
      }
    }
  }
};
</script>

<style lang="less">
#pay {
  .pay-num {
    text-align: center;
    margin: 40px 0;
    font-size: 25px;
    font-weight: 600;
    color: #d81e06;
  }
  .pay-num span {
    font-size: 18px;
  }
  .pay-type {
    margin: 30px 0px;
    .pay-wx {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 50px;

      .pay-wx-left {
        display: flex;
        align-items: center;
        p {
          padding-left: 15px;
        }
      }
    }
    .pay-line {
      margin: 15px 30px;
      height: 1px;
      background: #333;
    }
  }
  .pay-btn {
    width: 80%;
    margin: 120px auto 20px auto;
    background: #86c07b;
    padding: 8px 0;
    border-radius: 8px;
    text-align: center;
    color: #fff;
  }
  .pay-btn-d {
    width: 80%;
    margin: 120px auto 20px auto;
    background: #ccc;
    padding: 8px 0;
    border-radius: 8px;
    text-align: center;
    color: #fff;
  }
}
p {
  margin: 0;
  padding: 0;
}
</style>
